iT邦幫忙

3

jStorage 使用

  • 分享至 

  • xImage
  •  

jStorage是ㄧ個優秀的控制localstorage的工具,此文章簡單示範使用的方式以及一些使用資訊。
Blogger 備份
http://ryanyang-0818.blogspot.tw/2015/02/jstorage.html

jStorage 使用
一、前言
二、使用資訊
三、使用範例
set / get
deleteKey(key)
setTTL(key, ms)
getTTL(key)
index()
storageSize()
listenKeyChange(key, callback) / stopListening(key[, callback])
subscribe(channel, callback) / publish(channel, payload)

一、前言
jStorage是ㄧ個優秀的控制localstorage的工具,此文章簡單示範使用的方式以及一些使用資訊。

二、使用資訊
一般來說,jStorage可搭配jQuery、prototype使用,但筆者這邊只有用jQuery來RUN,
此外,在舊一點的瀏覽器,例如說IE6,需要額外載入JSON2套件來做搭配,新一點的瀏覽器就不用了。
JSON2載點http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js
jStorage載點https://raw.githubusercontent.com/andris9/jStorage/master/jstorage.js

三、使用範例

set / get

$.jStorage.set('商品編號', ‘1234567’) ;
var itno = $.jStorage.get('商品編號') ;  // itno = ‘1234567’
$.jStorage.set('商品編號') ;
var itno = $.jStorage.get('商品編號') ;  // itno = null ;

deleteKey(key)

        $.jStorage.set('商品編號', '1234567') ;
        var flag = $.jStorage.deleteKey('商品編號') ;  //flag = true
        //第二次刪不到東西,會回傳false
var flag = $.jStorage.deleteKey('商品編號') ;  //flag = false
        setTTL(key, ms)

$.jStorage.set('商品編號', '1234567') ;
$.jStorage.setTTL('商品編號', 3000) ;
// 三秒後
var val = $.jStorage.get('商品編號') ;  // val = null

getTTL(key)

$.jStorage.set('商品編號', '1234567') ;
"1234567"
$.jStorage.setTTL('商品編號', 15000) ;
true
$.jStorage.getTTL('商品編號') ;
8604
$.jStorage.getTTL('商品編號') ;
7702
$.jStorage.getTTL('商品編號') ;
6943
$.jStorage.getTTL('商品編號') ;
6158
//15秒過後
$.jStorage.getTTL('商品編號') ;

index()

$.jStorage.set('商品編號', '1234567') ;
"1234567"
$.jStorage.index() ;
["商品編號"]
$.jStorage.set('價錢', '550') ;
"550"
$.jStorage.index() ;
["商品編號", "價錢"]

storageSize()

$.jStorage.storageSize() ;
108  //回傳bytes大小

listenKeyChange(key, callback) / stopListening(key[, callback])

//針對商品編號綁定兩個事件
$.jStorage.listenKeyChange("商品編號", function(key, action){
    console.log(key + " has been " + action + ', do action1');
});
$.jStorage.listenKeyChange("商品編號", function(key, action){
    console.log(key + " has been " + action + ', do action2');
});
$.jStorage.set('商品編號', '123456789') ;
商品編號 has been updated, do action1
商品編號 has been updated, do action2
//兩個都會觸發
$.jStorage.listenKeyChange("郵遞區號", function(key, action){
    console.log(key + " has been " + action);
});
$.jStorage.set('郵遞區號', '12345') ;
郵遞區號 has been updated
//即便是新增KEY,action依舊是updated
$.jStorage.get('郵遞區號') ;
//get不會觸發
$.jStorage.deleteKey('郵遞區號') ;
VM220:3 郵遞區號 has been deleted
//刪除會觸發,且 action是deleted
$.jStorage.listenKeyChange("數量", function(key, action){
    console.log(key + " has been " + action);
});
$.jStorage.set('數量', '5') ;
數量 has been updated
//成功綁定
$.jStorage.stopListening("數量");
$.jStorage.set('數量', '5') ;
// 沒事發生,事件已經被移除

subscribe(channel, callback) / publish(channel, payload)

$.jStorage.subscribe("ch1", function(channel, payload){
    console.log(payload+ " from " + channel);
});
$.jStorage.publish("ch1", "data") ;
data from ch1

//可以利用訂閱、發佈功能來變成資料訂閱中心


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言